<template>
  <div class="tem_left">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :router="true"
    >
      <el-submenu
        :index="index + ''"
        v-for="(item, index) in subarr"
        :key="index"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item v-for="(i, e) in item.subs" :key="e" :index="i.path">{{
          i.title
        }}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subarr: [
        {
          title: "商品管理",
          icon: "el-icon-s-tools",
          subs: [
            { title: "商品列表", path: "/good" },
            { title: "商品分类", path: "/category" },
            { title: "品牌管理", path: "/brand" },
            { title: "商品属性管理", path: "/attribute" }
          ]
        },
        {
          title: "订单中心",
          icon: "el-icon-s-management",
          subs: [{ title: "订单列表", path: "/order" }]
        },
        {
          title: "店铺运营",
          icon: "el-icon-service",
          subs: [
            { title: "专题管理", path: "/topic" },
            { title: "运营数据", path: "/statdata" }
          ]
        }
      ]
    };
  }
};
</script>
 
<style lang = "less" scoped>
.el-menu {
  width: 250px;
}
.tem_left {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 70px;
  height: calc(100vh - 70px);
  .el-menu {
    height: 100%;
  }
}
</style>